<template>
  <div>
    <div class="something">
      <div class="somethingspace">
        <el-space>
          <el-input v-model.trim="title" placeholder="输入商品名称" clearable />
          <el-input
            v-model.trim="barcode"
            placeholder="输入商品条形码"
            clearable
          />
          <el-select placeholder="选择商品状态" v-model="status" clearable>
            <el-option
              v-for="item in stuts"
              :label="item.name"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
          <div class="example-block">
            <el-cascader
              :options="options"
              :props="props1"
              placeholder="请选择类目"
              v-model="categoryId"
              clearable
            />
          </div>
          <el-button
            type="primary"
            class="iconfont icon-sousuo"
            @click="Management()"
            >查找</el-button
          >
          <el-button type="primary" class="iconfont icon-tianjia" @click="add"
            >添加</el-button
          >
        </el-space>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column type="expand" label="sku信息" width="60px">
          <template #default="props">
            <el-table :data="props.row.skuList" border style="width: 100%">
              <el-table-column prop="barCode" label="商品条码" align="center" />
              <el-table-column prop="title" label="商品规格" align="center" />
              <el-table-column prop="stock" label="商品库存" align="center" />
              <el-table-column
                prop="originalPrice"
                label="原价"
                align="center"
              />
              <el-table-column prop="price" label="现价" align="center" />
              <el-table-column prop="vipPrice" label="VIP价格" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="商品ID" width="100" />
        <el-table-column prop="title" label="名称" width="280" />
        <el-table-column prop="img" label="主图" align="center">
          <template #default="scope">
            <el-image :src="scope.row.img"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="商品详细介绍" align="center">
          <template #default="scope">
            <el-button type="primary" @click="Check(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="categoryId" label="类目ID" width="120" />
        <el-table-column
          prop="freightTemplateId"
          label="邮费模版ID"
          width="120"
        />
        <el-table-column prop="sales" label="销量" width="60" />
        <el-table-column prop="unit" label="单位" width="60" />
        <el-table-column
          prop="address"
          label="是否在售"
          align="center"
          width="140"
        >
          <template #default="props">
            <el-tag :type="props.row.status == 1 ? 'warning' : 'plain'">{{
              props.row.status == 1 ? "在售" : "未售"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="small"
              :type="scope.row.status ? 'success' : 'warning'"
              @click="handleStatus(scope.row)"
              >{{ scope.row.status ? "下架" : "上架" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 图片详情页 -->
      <el-dialog v-model="imgInformation" title="图片详情页" width="55%">
        <div v-html="cont" style="text-align: center"></div>
      </el-dialog>
      <!-- 分页组件 -->
      <PagLnatio
        class="dins"
        v-bind="paging"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </PagLnatio>
    </div>
  </div>
</template>

<script>
import http from "@/http";
import cookin from "js-cookie";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      time: null,
      imgInformation: false, //查看对话框
      categoryId: "", //搜索分类ID
      title: "", //搜索标题
      barcode: "", //商品条形码
      status: "", //商品状态

      tableData: [], //列表数据
      //商品状态
      stuts: [
        { value: 1, name: "在售" },
        { value: 0, name: "未售" },
      ],
      options: [],
      //类目
      props1: {
        children: "childrenList",
        label: "title",
        value: "id",
        checkStrictly: true,
        emitPath: false,
      },
      //分页数据
      paging: {
        page: 1, //默认第一页
        limit: 10, //显示几页
        total: null,
      },
    };
  },
  created() {
    this.category(); //类目
    this.Management();
  },
  methods: {
    //类目
    category() {
      let leimu = {
        _gp: "admin.category",
        _mt: "categoryTree",
      };
      http.post(leimu).then((res) => {
        this.options = res.data;
      });
    },
    //渲染数据
    Management() {
      let list = {
        _gp: "admin.product",
        _mt: "list",
        page: this.paging.page,
        limit: this.paging.limit,
        categoryId: this.categoryId,
        title: this.title,
        barcode: this.barcode,
        status: this.status,
      };
      http.post(list).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          this.paging.total = res.data.total;
          this.tableData = res.data.items;
        }
      });
    },
    //查看图片
    Check(row) {
      console.log(row);
      this.imgInformation = true;
      let checkdata = {
        _gp: "admin.product",
        _mt: "detail",
        spuId: row.id,
      };
      http.post(checkdata).then((res) => {
        this.cont = res.data.detail;
      });
    },
    // 上下架
    handleStatus(row) {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(() => {
        console.log(row);
        let statusdata = {
          _gp: "admin.product",
          _mt: "freezeOrActivation",
          spuId: row.id,
          status: row.status ? 0 : 1,
        };
        http.post(statusdata).then((res) => {
          if (200 == res.errno) {
            ElMessage.success("配置成功！");
            this.Management();
          } else {
            ElMessage.error(res.errmsg);
          }
        });
      }, 300);
    },
    //添加
    add() {
      this.$router.push({ name: "commod" });
    },
    handleEdit(id) {
      this.$router.push({ name: "editor", params: { id } });
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.Management();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.Management();
    },
  },
};
</script>

<style lang="less" scope>
.something {
  width: 98%;
  margin: auto;
  .somethingspace {
    height: 40px;
  }
}
</style>
